import React from 'react';
import ReactDOM from 'react-dom';

class Child extends React.Component {
  state = { qq: 123 }
  shouldComponentUpdate(nextProps, nextState) {
    /* 
      nextProps 对应的新的数据
      this.props b里边对应的是老数据
    */
    // console.log(arguments)
    if (nextProps.name !== this.props.name) {
      return true
    }
    return false
  }
  render() {
    console.log('render')
    let { name } = this.props
    return <>
      <h1>子组件{name}</h1>
    </>
  }
}


class Child2 extends React.Component {
  state = { qq: 123 }
  shouldComponentUpdate(nextProps = {}, nextState = {}) {
    if (nextProps.obj != this.props.obj || nextState != this.state) {
      return true
    }

    return false

  }
  render() {
    console.log('render2')
    let { obj } = this.props
    return <>
      <h1>子组件{obj.q}</h1>
      <button onClick={() => { this.setState({ qq: 1233354346 }) }}></button>
    </>
  }
}

class Child3 extends React.PureComponent {
  // 内置shouldComponentUpdate  但是值比较一层数据
  render() {
    console.log('render3')
    let { obj } = this.props
    return <>
      <h1>子组件{obj.q}</h1>
    </>
  }
}


class App extends React.Component {
  state = {
    name: "珠峰",
    age: 12,
    obj: {
      q: 123,
      w: 333,
      e: 555
    }
  }
  changeName = (e) => {
    // this.state.obj.q = 666
    this.setState({
      name: e.target.value,
      obj: {
        ...this.state.obj,
        q: 666
      }
    })
  }
  changeAge = (e) => {
    this.setState({
      age: e.target.value
    })
  }
  render() {
    let { name, age, obj } = this.state;
    return <div className=''>
      <h2>{name}{age}</h2>
      <input type="text" value={name} onChange={this.changeName} />
      <input type="text" value={age} onChange={this.changeAge} />
      <Child name={name} />
      <Child2 obj={obj} />
      {obj.q}
      <Child3 obj={obj} />

    </div>;
  }
}

ReactDOM.render(<App />, document.getElementById('root'))